<!-- 组件 置顶 -->
<template>
  <div class="Istop" v-show="toTopShow">
    <van-icon name="back-top" class="Istop-icon" @click="scrollTo" />
  </div>
</template>

<script setup name="Istop">
import { ref, onMounted } from "vue";

let toTopShow = ref(false)

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
})

// 回到顶部
function scrollTo() {
  window.scrollTo(0, 0);
}
// 滚轮事件
function handleScroll() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  toTopShow.value = scrollTop > 300;
}
</script>

<style lang="scss" scoped>
.Istop {
  position: fixed;
  right: 40px;
  bottom: 29px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 1px 20px 0px rgb(0 0 0 / 10%), inset 0px -1px 0px 0px rgb(0 0 0 / 10%);

  &-icon {
    display: flex;
    justify-content: center;
    font-size: 21px;
    line-height: 30px;
  }
}
</style>
